<!--
 * @Author: monet hanxu@huaun.com
 * @Date: 2023-09-22 18:25:41
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2024-01-24 20:27:57
 * @FilePath: /h-radar-expose/pages/Exposure/ExposeList/codeDetial.vue
 * @Description: 暗网信息详情页面
-->
<template>
  <LayoutDetail
    :title-btn="titleBtn"
    :left-num="1"
    :head-num="3"
    :tabs-list="tabsList"
    :tab-active="tabActive"
    :showRightHead="showRightHead"
    @showPrompt="showPrompt"
  >
    <!-- 左侧 -->
    <template #title>
      <el-tooltip effect="dark" :content="detialInfo.title" placement="bottom">
        <span>{{ detialInfo.title }}</span>
      </el-tooltip>
    </template>
    <template #content-title-1>基本信息</template>
    <template #content-body-1>
      <LayoutInfoList :info-list="infoList"></LayoutInfoList>
    </template>

    <!--右侧 -->
    <template #tab-content-assetProfile>
      <LayoutDraw :left-num="1" :left-span="24" :right-span="0">
        <template #content-title-1>基础信息</template>
        <template #content-body-1>
          <LayoutFormList :col-span="24" :form-list="baseInfo"></LayoutFormList>
          <div v-if="detialInfo?.imageUrls?.length" class="image-preview">
            <el-image
              :src="iconPrefix(detialInfo.imageUrls)[0]"
              :preview-src-list="iconPrefix(detialInfo.imageUrls)"
            >
            </el-image>
          </div>
        </template>
      </LayoutDraw>
    </template>
    <template #tab-content-exposurePath> </template>
    <template #tab-content-associatedExposure> </template>
    <template #tab-content-surfaceAnalysis> </template>
  </LayoutDetail>
</template>

<script lang="ts" setup>
import LayoutDetail from '@/components/Expose/Layout/Detail.vue';
import LayoutInfoList from '@/components/Expose/Layout/InfoList.vue';
import LayoutFormList from '@/components/Expose/Layout/FormList.vue';
import LayoutExpandableBox from '@/components/Expose/Layout/ExpandableBox.vue';
import LayoutNoticeList from '@/components/Expose/Layout/NoticeList.vue';
import LayoutDraw from '@/components/Expose/Layout/Draw.vue';
import GraphExposurePath from '@/components/Expose/Graph/ExposurePath.vue';
import GraphExposureSurface from '@/components/Expose/Graph/ExposureSurface.vue';
import GraphSurfaceAnalysis from '@/components/Expose/Graph/SurfaceAnalysis.vue';
import ModelList from '@/components/Expose/ModelList.vue';
import TagManip from '@/components/Expose/TagManip.vue';
import AssessmentBlock from '@/components/Expose/AssessmentBlock.vue';
import ShowCode from '@/components/Expose/ShowCode.vue';
import noData from '@/components/Expose/noData.vue';
import { usewebDetail } from '@/composables/Expose/usewebDetail';
import { useRoute } from 'vue-router';
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const route = useRoute();
const {
  detialInfo,
  basicInfo,
  delTag,
  addTag,
  showPrompt,
  category,
  changeList,
  getDetialById,
  getLeftBaseInfo,
  getAssetChanged,
  getAnalysis,
} = usewebDetail();
const id = ref(route.query.id || '');
const tabActive = ref('assetProfile');
const tabsList = ref([
  {
    name: 'assetProfile',
    label: '资产画像',
    disabled: false,
  },
]);
const showRightHead = ref(false);
const titleBtn = computed(() => {
  const urlList = ['http', 'https'];
  let array = [
    {
      flag: 'url',
      tip: '访问',
      icon: 'vul-icon-url',
    },
  ];

  if (!urlList.includes(detialInfo.value.protocol)) {
    array = array.filter((el) => el.flag !== 'url');
  }

  return array;
});
const infoList = computed(() => {
  const {
    sourceType,
    type,
    hitWord,
    dataSource,
    crawingTime,
    publishTime,
    readCount,
  } = detialInfo.value;

  return [
    {
      label: '暗网事件',
      icon: 'vul-icon-operate',
      content:
        sourceType == 1 ? '数据交易' : sourceType == 2 ? '数据泄露' : '--',
    },
    {
      label: '数据类型',
      icon: 'vul-icon-type',
      content: type,
    },
    {
      label: '命中词',
      icon: 'vul-icon-poc',
      content: hitWord,
    },
    {
      label: '泄漏源',
      icon: 'vul-icon-address',
      content: dataSource,
    },
    {
      label: '发现时间',
      icon: 'vul-icon-time',
      content: crawingTime,
    },
    {
      label: '曝光时间',
      icon: 'vul-icon-date',
      content: publishTime,
    },
    {
      label: '阅读量',
      icon: 'vul-icon-task',
      content: String(readCount),
    },
  ];
});
const baseInfo = computed(() => {
  const { detailPageUrl } = detialInfo.value;
  return [
    {
      label: '暗网地址',
      content: detailPageUrl,
      type: 'copy',
    },
  ];
});
onMounted(async() => {
  category.value = 'darknet';
  await getDetialById('detail/getDarknetById');
});
const iconPrefix = (arr) => {
  let newArr: any = [];
  arr.forEach((el) => {
    const substring = el.substring(4);
    const newUrl = `/dayu/v1/huaun${substring}`;
    newArr.push(newUrl);
  });
  return newArr;
};
</script>
<style lang="scss" scoped>
.table-search {
  margin-top: $-v-spacing-horizontal-base;
  text-align: right;
}
.image-preview {
  width: 1200px;
  height: 500px;
  margin: 24px auto;

  .el-image {
    width: 100%;
    height: 500px;
  }
}
</style>
